<template>
    <div class="content">
        <a-card class="card">
            <div class="tableBox">
                <a-table :loading="loading"
                         childrenColumnName="childrenMenus"
                         @change="changeTable"
                         :dataSource="tableData"
                         :rowKey="(record , index) => {return record.id}"
                         :pagination="pagination"
                         :columns="columns">
                    <template #goodsName="{text}">
                        <span style="color: #ff4d4f">{{text}}</span>
                    </template>
                    <template #shopName="{text}">
                        <a-tag color="success">{{text}}</a-tag>
                    </template>
                    <template #type="{text}">
                        <a-tag color="cyan">{{text}}</a-tag>
                    </template>
                    <template #originalPrice="{text}">
                        <span style="color: #42b983">{{text}}</span>
                    </template>
                    <template #presentPrice="{text}">
                        <span style="color: red">{{text}}</span>
                    </template>
                    <template #status="{ text}">
                        <span style="color: #4EB1F7" v-if="text==0">是</span>
                        <span v-else style="color: #0FBA8E">否</span>
                    </template>

<!--                    <template #action="{record}">-->
<!--                        <a-button type="link" @click="detailHandle(record)">详情</a-button>-->
<!--                    </template>-->
                </a-table>
            </div>
        </a-card>

    </div>
</template>

<script>
import {defineComponent, reactive, onMounted, toRefs} from "vue";
import { apiGetGoodsInfo} from "../../api";
import {message} from "ant-design-vue";

export default defineComponent({
    name: "index",
    setup() {
        const state = reactive({
            userInfo: JSON.parse(window.localStorage.getItem('userInfo')),
            shopId: '', // 店铺id
            shopName: '', // 店铺名称

        })
        const tableDataObj = reactive({
            loading: false,
            tableData: [],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 1,
                showSizeChanger: true,
                showTotal: (total) => {
                    return `共 ${total} 条`
                }
            },
            scroll: { x: 1000, y: 300 },
            columns: [
                {
                    title: "序号",
                    width: 70,
                    align: 'center',
                    customRender: (text) => `${text.index + 1}`
                },
                {
                    title: "商品名称",
                    dataIndex: "goodsName",
                    key: "goodsName",
                    align: 'center',
                    width: 140,
                    ellipsis: true,
                    slots: { customRender: 'goodsName'}
                },
                {
                    title: "商品所属店铺",
                    dataIndex: "shopName",
                    align: 'center',
                    // width: 200,
                    key: "shopName",
                    // ellipsis: true,
                    slots: { customRender: 'shopName'}
                },
                {
                    title: "商品所属分类",
                    dataIndex: "typeName",
                    key: "typeName",
                    align: 'center',
                    // width: 150,
                    // ellipsis: true,
                    slots: { customRender: 'type'}
                },
                {
                    title: "商品描述",
                    dataIndex: "remark",
                    align: 'center',
                    key: "remark",
                    ellipsis: true
                },
                {
                    title: "原价",
                    dataIndex: "originalPrice",
                    align: 'center',
                    key: "originalPrice",
                    ellipsis: true,
                    slots: { customRender: 'originalPrice'}
                },
                {
                    title: "现价",
                    dataIndex: "presentPrice",
                    align: 'center',
                    key: "presentPrice",
                    ellipsis: true,
                    slots: { customRender: 'presentPrice'}
                },
                {
                    title: "是否上架",
                    dataIndex: "status",
                    key: "status",
                    align: 'center',
                    ellipsis: true,
                    slots: { customRender: 'status'}
                },
                {
                    title: "商品库存",
                    dataIndex: "stock",
                    align: 'center',
                    key: "stock",
                    ellipsis: true,
                },
                {
                    title: "添加时间",
                    dataIndex: "createTime",
                    align: 'center',
                    key: "createTime",
                    width: 200,
                    ellipsis: true
                },
                // {
                //     title: "操作",
                //     key: "action",
                //     align: 'center',
                //     width: 150,
                //     slots: {
                //         customRender: "action"
                //     }
                // }
            ]
        })

        // 获取所有商品列表
        const getList = async () => {
            const params = {
                limit: tableDataObj.pagination.pageSize,
                page: tableDataObj.pagination.current,
            }
            const {data} = await apiGetGoodsInfo(params)
            tableDataObj.tableData = data.data.list
            tableDataObj.pagination.total = data.data.totalCount
        }
        // 分页
        const changeTable = (pagination) => {
            console.log('qwe', pagination)
            tableDataObj.pagination.pageSize = pagination.pageSize
            tableDataObj.pagination.current = pagination.current
            getList()
        }


        onMounted(() => {
            getList()
        })
        return {
            ...toRefs(state),
            ...toRefs(tableDataObj),
            changeTable,

        }
    }
})
</script>

<style lang="less" scoped>
.content{
    width: 100%;
    height: 100%;

    .card {
        height: 100%;
        //background: #364d79;
        margin: 10px;

        .button {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 15px;
        }
    }
}
</style>
